<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <style>
    h1 {
      margin-top: 200px;
      color: #5FB878;
    }

    .layui-card-body {
      text-align: center;
      height: 500px;
    }
  </style>
</head>

<body class="pear-container">
  <div class="layui-card">
    <div class="layui-card-header"></div>
    <div class="layui-card-body">
      <form class="layui-form" action="" onsubmit="return false">
        <div class="layui-form-item">
          <label class="layui-form-label">头像地址</label>
          <div class="layui-input-block">
            <input type="text" id="avatar" name="avatar" required lay-verify="required" placeholder="头像地址"
              autocomplete="off" class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="avatar_update">修改</button>
          </div>
        </div>
      </form>
    </div>
  </div>


</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
  layui.use(['form', 'jquery'], function () {
    let form = layui.form;
    let $ = layui.jquery;


    $.ajax({
      url: '/api/user/query/avatar',
      contentType: 'application/json',
      dataType: 'json',
      type: 'post',
      success: function (result) {
        if (result.code == 0) {
          $("#avatar").val(result.map.avatar)
        }
      }
    })

    form.on('submit(avatar_update)', function (data) {
      $.ajax({
        url: '/api/user/update/phone',
        data: JSON.stringify(data.field),
        contentType: 'application/json',
        dataType: 'json',
        type: 'post',
        success: function (result) {
          if (result.code == 0) {
            layer.msg(result.msg, { icon: 1, time: 1000 });
          } else {
            layer.msg(result.msg, { icon: 2, time: 1000 });
          }
        }
      })
      return false;
    });
  })
</script>

</html>